<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>班级管理</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>

    <div th:include="common/common.html :: commonheader"></div>

</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common/common.html :: #leftmenu"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div th:replace="common/common.html :: headermenu"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                班级管理
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">学籍管理系统</a>
                </li>
                <li>
                    <a href="#">班级管理</a>
                </li>
                <li class="active">班级信息表</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <header class="panel-heading">
                        班级信息表
                    </header>
                    <div class="panel-body">
                        <div class="adv-table">
                            <!-- 添加按钮 -->
                            <button id="class_add_btn" type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#class_add_modal">
                                添加记录
                            </button>
                            <button class="btn btn-danger" id="class_delete_all">批量删除</button>
                            <table class="display table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th style="text-align: center" width="20px">
                                        <input type="checkbox" id="check_all"/>
                                    </th>
                                    <th style="text-align: center">班级名称</th>
                                    <th style="text-align: center">所属学院</th>
                                    <th style="text-align: center">班级备注</th>
                                    <th style="text-align: center">创建时间</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody id="class_tbody">
                                </tbody>
                            </table>
                            <div class="row-fluid" id="page_info"></div>
                            <div class="row-fluid" id="page_nav"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <div th:replace="common/common.html :: footer"></div>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- 新增模态框 -->
<div class="modal fade" id="class_add_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">专业添加</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal" name="class_form" id="class_form">
                    <div class="form-group">
                        <label for="cName_form" class="col-sm-2 control-label">*班级名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cName"
                                   id="cName_form"
                                   placeholder="班级名称" required="required">
                            <span id="span" style="color: red"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="dept_options" class="col-sm-2 control-label">*所属院系</label>
                        <div class="col-sm-6">
                            <select id="dept_options" class="form-control" name="cDepartment">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="cMark_form" class="col-sm-2 control-label">班级备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cMark"
                                   id="cMark_form"
                                   placeholder="班级备注">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="class_add_cancel"
                        data-dismiss="modal">取消
                </button>
                <button type="submit" class="btn btn-primary" id="class_add_enter">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 修改模态框 -->
<div class="modal fade" id="class_update_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">专业添加</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal" name="class_form" id="class_form_update">
                    <div class="form-group">
                        <label for="cName_form" class="col-sm-2 control-label">*班级名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cName"
                                   id="cName_form_update"
                                   placeholder="班级名称" required="required">
                            <span id="span_update" style="color: red"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="dept_options" class="col-sm-2 control-label">*所属院系</label>
                        <div class="col-sm-6">
                            <select id="dept_options_update" class="form-control" name="cDepartment">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="cMark_form" class="col-sm-2 control-label">班级备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cMark"
                                   id="cMark_form_update"
                                   placeholder="班级备注">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="class_update_cancel"
                        data-dismiss="modal">取消
                </button>
                <button type="submit" class="btn btn-primary" id="class_update_enter">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="js/dynamic_table_init.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<script type="text/javascript">
    $(function () {
        to_page(1);
        var totalPage;
        var currentPage;

        // 获取解析院系数据
        function build_table(data) {
            // 清空原来的数据
            $("#class_tbody").empty();
            let classes = data.extend.classes;
            $.each(classes, function (index, item) {
                let checkBox = $("<td><input type='checkbox' class='check_item'/></td>");
                let cName = $("<td style=\"text-align: center\"></td>").append(item.cname);
                let dName = $("<td style=\"text-align: center\"></td>").append(item.dname).attr("cDepartment", item.cdepartment);
                let cMark = $("<td style=\"text-align: center\"></td>").append(item.cmark);
                let cDate = $("<td style=\"text-align: center\"></td>").append(item.cdate);
                let updateBtn = $("<button></button>").addClass("btn btn-info update_btn").append("修改").attr("update_btn", item.cid)
                    .attr("data-target", "#class_update_modal").attr("data-toggle", "modal");
                let delBtn = $("<button></button>").addClass("btn btn-danger del_btn").append("删除").attr("del_id", item.cid);
                let btnTd = $("<td style=\"text-align: center\"></td>").append(updateBtn).append(" ").append(delBtn);
                $("<tr></tr>").append(checkBox).append(cName).append(dName).append(cMark).append(cDate).append(btnTd).appendTo($("#class_tbody"));
            });
        }

        // 解析显示分页数据
        function build_page_info(result) {
            let page_info = $("#page_info");
            //清空跳行条内容
            page_info.empty();
            // 获取总记录条数
            let total = result.extend.page.total;
            // 获取当前页
            let current = result.extend.page.current;
            currentPage = current;
            // 获取最大页数
            let pages = parseInt(result.extend.page.total / result.extend.page.size);
            if (result.extend.page.total % result.extend.page.size !== 0) {
                pages++;
            }
            totalPage = pages;
            page_info.append("当前第" + current + "页,共" + pages + "页,共条" + total + "记录");
        }

        // 解析显示分页数据
        function build_page_nav(result) {
            //获取page信息
            let page = result.extend.page
            let page_nav = $("#page_nav");
            page_nav.empty();
            let ul = $("<ul></ul>").addClass("pagination")
            // 去首页
            let firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            // 上一页
            let prevPageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href", "#"));
            // 判断上一页能否使用
            if (page.current === 1) {
                firstPageLi.addClass("disabled");
                prevPageLi.addClass("disabled");
            } else {
                firstPageLi.click(function () {
                    to_page(1);
                });
                prevPageLi.click(function () {
                    to_page(page.current - 1);
                });
            }
            ul.append(firstPageLi).append(prevPageLi);


            // 下一页
            let nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href", "#"));
            // 末页
            let lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
            // 判断下一页和末页是否生效
            if (page.current === page.pages) {
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            } else {
                nextPageLi.click(function () {
                    to_page(page.current + 1);
                });
                lastPageLi.click(function () {
                    to_page(page.pages);
                });
            }

            // // 中间页码
            if (page.pages <= 5) {
                for (let pageNum = 1; pageNum <= page.pages; pageNum++) {
                    let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                    if (pageNum === page.current) {
                        numLi.addClass("active");
                    }
                    numLi.click(function () {
                        to_page(pageNum);
                    });
                    ul.append(numLi);
                }
            } else if (page.pages > 5 && page.current < 3) {
                for (let pageNum = 1; pageNum <= 5; pageNum++) {
                    let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                    if (pageNum === page.current) {
                        numLi.addClass("active");
                    }
                    numLi.click(function () {
                        to_page(pageNum);
                    });
                    ul.append(numLi);
                }
            } else if (page.pages > 5 && page.current <= page.pages - 2) {
                for (let pageNum = page.current - 2; pageNum <= page.current + 2; pageNum++) {
                    let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                    if (pageNum === page.current) {
                        numLi.addClass("active");
                    }
                    numLi.click(function () {
                        to_page(pageNum);
                    });
                    ul.append(numLi);
                }
            } else if (page.pages > 5 && page.current > page.pages - 2) {
                for (let pageNum = page.current - 4; pageNum <= page.pages; pageNum++) {
                    let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                    if (pageNum === page.current) {
                        numLi.addClass("active");
                    }
                    numLi.click(function () {
                        to_page(pageNum);
                    });
                    ul.append(numLi);
                }
            }

            ul.append(nextPageLi).append(lastPageLi);
            let nav = $("<nav></nav>").attr("aria-label", "Page navigation").attr("style", "float: right");
            nav.append(ul);
            nav.appendTo(page_nav);
        }

        function to_page(pn) {
            $.ajax({
                url: "/class",
                data: "pn=" + pn,
                type: "GET",
                success: function (result) {
                    // 1.解析并显示员工数据局
                    build_table(result);
                    // 分页数据
                    build_page_info(result);
                    // 导航条
                    build_page_nav(result);
                    $("#check_all").prop("checked", "");
                }
            })
        }

        // 点击添加 按钮  获取到 所有院系 作为下拉列表
        function options (option) {
            // 发送Ajax请求 获取到 院系信息
            $.ajax({
                url: "/department_all",
                type: "GET",
                success: function (result) {
                    let depts = result.extend.departments;
                    option.empty();
                    $.each(depts, function (index, item) {
                        $("<option></option>").append(item.dname).attr("value", item.did).appendTo(option);
                    });
                }
            })
        }

        $("#class_add_btn").click(function () {
            // 发送Ajax请求 获取到 院系信息
            $("#span").text("");
            options($("#dept_options"));
        });

        // 点击添加确定 按钮 添加 数据
        $("#class_add_enter").click(function () {
            let data = $("#class_form").serialize();
            // 发送Ajax请求 添加数据
            $.ajax({
                url: "/class",
                data: data,
                type: "POST",
                success: function (result) {
                    rest_form("#class_form")
                    $("#class_add_modal").modal("hide");
                    alert("添加成功");
                    to_page(totalPage);
                }
            });
        });

        // 清除表单数据
        function rest_form(ele) {
            $(ele)[0].reset();
            // 清空表单样式
            $(ele).find("*").removeClass("has-success has-error");
            $(ele).find(".help-block").text("");
        }

        // 单个删除功能
        $(document).on("click", ".del_btn", function () {
            let cNames = $(this).parents("tr").find("td:eq(1)").text();
            if (confirm("你确定要删除【" + cNames + "】吗?")) {
                let mId = $(this).attr("del_id");
                // 发送 ajax 请求删除 数据
                $.ajax({
                    url: "/class/" + mId,
                    type: "DELETE",
                    success: function (result) {
                        alert("删除成功");
                        to_page(currentPage);
                    }
                });
            }

        });

        // 取消添加
        $("#class_add_cancel").click(function () {
            rest_form($("#class_form"));
        });

        // 全选按钮
        $("#check_all").click(function () {
            let checked = $(this).prop("checked");
            $(".check_item").prop("checked", checked);
        });
        //
        // 实现批量删除
        $("#class_delete_all").click(function () {
            let cNames = "";
            let cIds = "";

            $.each($(".check_item:checked"), function () {
                cNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
                cIds += $(this).parents("tr").find("td:eq(5)").find(".del_btn").attr("del_id") + "-";
            });
            cNames = cNames.substring(0, cNames.length - 1);
            cIds = cIds.substring(0, cIds.length - 1);
            if (confirm("你确定要删除【" + cNames + "】吗?")) {
                // 发送 Ajax请求 是想批量删除
                $.ajax({
                    url: "/class/" + cIds,
                    type: "DELETE",
                    success: function (result) {
                        alert("删除成功");
                        to_page(currentPage);
                    }
                });
            }


        });

        // 点击修改按钮
        $(document).on("click", ".update_btn", function () {
            $("#span_update").text("");
            $("#dept_options_update").text("");
            let cName = $(this).parents("tr").find("td:eq(1)").text();
            let cMark = $(this).parents("tr").find("td:eq(3)").text();
            let cID = $(this).attr("update_btn");
            let dName = $(this).parents("tr").find("td:eq(2)").text();
            let cDepartment = $(this).parents("tr").find("td:eq(2)").attr("cDepartment");
            $("#class_update_enter").attr("update_cID", cID);
            $("#cName_form_update").val(cName);
            $("#cMark_form_update").val(cMark);
            $("<option></option>").append(dName).attr("value", cDepartment).appendTo($("#dept_options_update"));
            // 发送Ajax请求 获取到 院系信息

            $.ajax({
                url: "/department_all",
                type: "GET",
                success: function (result) {
                    let depts = result.extend.departments;
                    $.each(depts, function (index, item) {
                        if(dName !== item.dname) {
                            $("<option></option>").append(item.dname).attr("value", item.did).appendTo($("#dept_options_update"));
                        }
                    });
                }
            });

        });
        //
        // 点击确定 修改按钮
        $("#class_update_enter").click(function () {
            // 发送Ajax 请求 更新数据
            let data = $("#class_form_update").serialize() + "&_method=PUT";
            $("#class_update_modal").modal("hide");
            let cId = $("#class_update_enter").attr("update_cID");
            $.ajax({
                url: "/class/" + cId,
                data: data,
                type: "PUT",
                success: function (result) {
                    alert("修改成功");
                    to_page(currentPage);
                }
            });
        });

        // 检查 专业 是否 已经存在
        function checkClass(cName, btn_ele, span_ele) {
            btn_ele.removeClass("disabled");
            span_ele.text("");
            // 发送 Ajax请求 检查 专业 是否 存在
            $.ajax({
                url: "/checkClass?cName=" + cName,
                type: "GET",
                success: function (result) {
                    let code = result.code;
                    if (code === 500) {
                        let msg = result.extend.msg;
                        btn_ele.addClass("disabled");
                        span_ele.text(msg);
                    }
                }
            });
        }

        focus($("#cName_form"));
        focus($("#cMark_form"));

        focus($("#cName_form_update"));

        function focus(ele) {
            ele.focusin(function () {
                $(this).select();
            });
        }

        $("#cName_form").change(function () {
            let mName = this.value;
            checkClass(mName, $("#class_add_enter"), $("#span"));
        });

        $("#cName_form_update").change(function () {
            let mName = this.value;
            checkClass(mName, $("#class_update_enter"), $("#span_update"));
        });

    });
</script>

</body>
</html>
